<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <link rel="stylesheet" href="..wh2114/vuedemo/lib/animate.css" />
    <style>
      .box {
        width: 170px;
        height: 170px;
        background: darkcyan;
      }
      table {
        border: 1px solid #000;
      }
      td {
        border: 1px solid #000;
        padding: 10px;
        text-align: center;
      }
      ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
      }
      li {
        width: 200px;
        background: pink;
      }

      .zoom-enter-active {
        animation: zoomInDown 0.9s;
      }

      .zoom-leave-active {
        animation: zoomOutDown 0.9s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>
      <hr />
      <div v-if="false">
        <button @click="flag=true">表格展示</button>
        <button @click="flag=false">列表展示</button>
        <ctable :cars="cars" v-if="flag"></ctable>
        <clist :cars="cars" v-else></clist>
      </div>
      <select v-model="cptname">
        <option value="ctable">表格展示</option>
        <option value="clist">列表展示</option>
      </select>

      <transition name="zoom" mode="out-in">
        <keep-alive>
          <component :is="cptname" :cars="cars"></component>
        </keep-alive>
      </transition>
    </div>

    <template id="ctable">
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>品牌</td>
            <td>型号</td>
            <td>颜色</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(l,key,i) in cars" :key="i">
            <td>{{i+1}}</td>
            <td>{{l.brand}}</td>
            <td>{{l.model}}</td>
            <td>{{l.color }}</td>
          </tr>
        </tbody>
      </table>
    </template>

    <template id="clist">
      <ul>
        <li v-for="(l,key,i) in cars" :key="i">
          <p>序号:{{i+1}}</p>
          <p>品牌:{{l.brand}}</p>
          <p>型号:{{l.model}}</p>
          <p>颜色:{{l.color }}</p>
        </li>
      </ul>
    </template>

    <script>
      const bus = new Vue(); // 空的Vue 实例对象
      Vue.component("myhead", {
        template: "<h2>wh2114 - 天天大声背面试题目 </h2>",
      });
      var cars = {
        car01: { brand: "Ford", model: "Mustang", color: "red" },
        car02: { brand: "Fiat", model: "500", color: "white" },
        car03: { brand: "Volvo", model: "XC90", color: "black" },
      };
      Vue.component("ctable", {
        template: "#ctable",
        props: ["cars"],
        mounted() {
          console.log("I am mounted table ");
        },
        destroyed() {
          console.log("I destroyed table ");
        },
        activated() {
          console.log("我被激活了...");
        },
        deactivated() {
          console.log("我被隐藏 失去活力了");
        },
      });
      Vue.component("clist", {
        template: "#clist",
        props: ["cars"],
      });

      const vm = new Vue({
        data: {
          title: "Vue component 动态组件切换",
          cars,
          flag: true,
          cptname: "ctable",
        },
        components: {},
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
    <!-- 
        component 官方组件
        is 属性   表示当前显示的组件 组件名称
        keep-alive  (记录滑动的高度)   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

        activated   激活
        deactivated 失活  
        
        transition 过渡组件 

        组件切换
        1. v-if
        2. v-show 
        3. component
        4. 路由 route 
     -->
  </body>
</html>
